/**
 * 学生考勤详情
 * @time 2017年11月7日16:17:32
 * @author 罗涛
 */
'use strict';
import React, {Component, PropTypes} from 'react';
import ReactDOM, {render} from 'react-dom';
import {connect} from 'react-redux';
import {Link} from 'react-router'
import {bindActionCreators} from 'redux';
import {R_header_fixed} from './common/index'
import {HttpService, Toast}  from'../Http';
import {
    newsStatus,
    imgOnError,
    getNowFormatDate,
    getWeek,
    getCountDays
} from '../Tool';

import kaoqin from '../../src/img/kaoqin.png'
import xiandian from '../../src/img/xiandian.png'
import yichang from '../img/yichangss.png'
import chidao from '../../src/img/chidao.png'
import zaodui from '../../src/img/zaodui.png'
import DatePicker2 from '../Component/DatePicker/DatePicker3'


export default class kaoqinAtt extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            studentName: this.props.params.studentName,
            studentId: this.props.params.studentId,
            data: new Date(),
            list: [],
            value: null,
            newDate:  getNowFormatDate('yyyy-MM-dd'),
            showDate:  getNowFormatDate('yyyy-MM-dd'),
        };
    }

    componentWillMount() {
        this.getDataList(this.state.showDate);
    }
    /**
     * 改变时间
     * @param value
     */
    handleValChange(value) {
        this.setState({
            value
        });
        this.getDataList(value);
    }

    /**
     * 获取学生一月考勤信息
     * @param timeSection
     */
    getDataList(timeSection){
        HttpService.query({
            url: '/teacherapp/student/getAttendanceLogs',
            data: {
                token: localStorage.appToken,
                starttime: timeSection,
                endtime: timeSection,
                babyid: this.state.studentId,
            },
            success: (res => {
                if (res.code == 20030) {
                    let list = [];
                    for(let i = res.data.length-1; i>=0; i--){
                        list.push(res.data[i])
                    }
                    this.setState({dataList: res.data,isLoad:true,list: list});
                }else{
                    Toast.toast(res.msg);
                }
            })
        })
    }

    /**
     * 时间转格式
     * @param time
     * @return {string}
     */
    timeStamp2String(time) {
        var datetime = new Date();
        datetime.setDate(datetime.getDate() + time);
        var year = datetime.getFullYear();
        var month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
        var date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
        var hour = '00';
        var minute = '00';
        var second = '00';
        return year + "-" + month + "-" + date;
    }

    render() {
        let {studentName,studentId} = this.state;
        const comparetime = this.timeStamp2String(0);
        const value = this.state.value;
        let right = <Link to={"/StatisticsAtt/"+studentName+"/"+studentId} className="end color-blue">统计</Link>;
        return <div className="kaoqing">
            <R_header_fixed title={studentName != undefined?studentName+'的考勤':''+'考勤'} left="1" right={right}/>
            <div className="abc">
                <div>
                    <ul>
                        <li>
                            <DatePicker2 pickerSwitch='true' onChange={this.handleValChange.bind(this)}/>
                        </li>
                    </ul>
                </div>
            </div>
            <div style={{height: '1rem', background: '#eee'}}></div>
            <div className="kaoqinginfo">
                <div className="info">
                    <div className="left"><img src={kaoqin} style={{width: '2.2rem', height: '2.2rem'}}/></div>
                    <div className="right">
                        {
                            value == null || value == comparetime ?
                                <spna>今日考勤</spna> :
                                <span>{value}</span>
                        }
                    </div>
                </div>

                {
                    this.state.list.map((json, index)=> {
                        return (
                            <div className="detail" key={index}>
                                <div className="img">
                                    <img src={xiandian} style={{width: '0.6rem', height: '3.1rem'}}/>
                                </div>
                                <div className="time">
                                    {
                                        json.type == 1 ?
                                            <span>到校时间</span> :
                                            json.type == 2 ?
                                                <span>离校时间</span> :
                                                json.type == 3 ?
                                                    <span></span> :
                                                    null
                                    }
                                    {json.attendancetime}
                                    {
                                        json.type2 == 1 ?
                                            <img src={chidao} style={{width: '4rem', height: '1.5rem'}}/> :
                                            json.type2 == 2 ?
                                                <img src={zaodui} style={{width: '4rem', height: '1.5rem'}}/> :
                                                json.type2 == 4 ?
                                                    null :
                                                    json.type2 == 5 ?
                                                        <img src={yichang} style={{width: '4rem', height: '1.5rem'}}/> :
                                                        null
                                    }
                                </div>
                            </div>
                        )

                    })
                }
                {
                    this.state.list.length == 0 ?
                        <div className="detail">
                            <div className="img"><img src={xiandian} style={{width: '0.6rem', height: '3.1rem'}}/></div>
                            <div className="time">暂无考勤信息</div>
                        </div> :null
                }
            </div>
        </div>
    }
}
